@extends('front.common.layout')

@section('content')
    <!-- banner -->
    <div class="inner-banner has-base-color-overlay text-center"
         style="background: url({{ asset('/front/images/background/news-banner.jpg') }});">
        <div class="container">
            <div class="box">
                <h3>NEWS</h3>
            </div>
        </div>
    </div>
    <div class="breadcumb-wrapper">
        <div class="container">
            <div class="breadcrumb_bar">
                <div class="breadcrumb_menu">
                    <ul class="link-list">
                        <li>
                            <a href="{{ url('/') }}">Home</a>
                        </li>
                        <li>
                            NEWS
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- banner end -->
    <div class="sidebar-page-container">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-md-8 col-sm-12 m-order-2">
                    <section class="blog-section padd-2 m-padd-0">
                        <div class="large-blog-news single-blog-post single-blog wow fadeInUp animated"
                             style="visibility: visible; animation-name: fadeInUp;">
                            <div class="img-box">
                                <img src="{{ $data['info']->banner }}" alt="News">
                            </div>
                            <div class="lower-content">
                                <div class="post-meta">By Gaohua / {{ date('M d, Y',strtotime($data['info']->created_at)) }} </div>
                                <h4>{{ $data['info']->news_title }}</h4>
                                <div class="text">
                                    {!! $data['info']->content !!}
                                </div>
                            </div>
                        </div>
                        <div class="share-box clearfix">
                            <ul class="tag-box">
                                <li>PREV:</li>
                                @if(isset($data['prev']->id))
                                    <li><a href="{{ url('news-detail',$data['prev']->id) }}">{{ $data['prev']->news_title }}</a></li>
                                @else
                                    <li><a></a></li>
                                @endif

                            </ul>
                            <div class="social-box">
                                <span>NEXT:</span>
                                <ul class="list-inline">
                                    @if(isset($data['next']->id))
                                        <li><a href="{{ url('news-detail',$data['next']->id) }}">{{ $data['next']->news_title }}</a></li>
                                    @else
                                        <li><a></a></li>
                                    @endif

                                </ul>
                            </div>
                        </div>

                        <div class="add_your_review">
                            <div class="inner-title">
                                <h3>Leave a comment</h3>
                            </div>
                            <form class="needs-validation" novalidate>
                                <div class="form-row">
                                    <div class="col-md-6 col-12">
                                        <label for="name">Name</label>
                                        <input type="text" class="form-control" id="name" placeholder="Your name" value="" required>
                                        <div class="valid-feedback"></div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <label for="email">Email</label>
                                        <input type="email" class="form-control" id="email" placeholder="Your email" value="" required>
                                        <div class="valid-feedback"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="message">Message</label>
                                    <textarea class="form-control" id="message" required rows="3"></textarea>
                                </div>
                                <button class="btn btn-primary" type="submit">SEND MESSAGE</button>
                            </form>
                        </div>
                    </section>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 m-order-1">
                    <div class="blog-sidebar padd-4">
                        <div class="category-style-one sidebar-padd mar-1">
                            <div class="inner-title">
                                <h3>News List</h3>
                            </div>
                            <ul class="list">
                                <li>
                                    <a href="{{ url('news','company') }}" class="clearfix">
                                        <span class="float_left">Company News</span>
                                        <span class="float_right"></span>
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ url('news','industry') }}" class="clearfix">
                                        <span class="float_left">Industry News</span>
                                        <span class="float_right"></span>
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <div class="popular_news sidebar-padd mar-1">
                            <div class="inner-title">
                                <h3>latest news</h3>
                            </div>
                            <div class="popular-post">
                                @foreach($data['latest_news'] as $v)
                                    <div class="item">
                                        <div class="post-thumb">
                                            <a href="{{ url('news-detail',$v->id) }}"><img src="{{ asset($v->img) }}" alt=""></a>
                                        </div>
                                        <h4><a href="#">{{ $v->news_title }}</a></h4>
                                        <div class="post-info">{{ date('M d, Y',strtotime($v->created_at)) }}</div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class=" sidebar-padd mar-1">
                            <div class="inner-title">
                                <h3>Contact Us</h3>
                            </div>
                            <div class="text">
                                <p>If you have any questions or Suggestions about our products or services, please feel free to contact us at any time! Our technical engineers will give you detailed answers.</p>
                            </div>
                            <br>
                            <div class="default-cinfo">
                                <div class="acc-content collapsed">
                                    <ul class="contact-infos">
                                        <li>
                                            <div class="icon_box">
                                                <i class="fa fa-map-marker"></i>
                                            </div>
                                            <div class="text-box">
                                                <p><b>Address:</b>
                                                    <br>{{ config('web_config.address') }}</p>
                                            </div>

                                        </li>
                                        <li>
                                            <div class="icon_box">
                                                <i class="fa fa-phone"></i>
                                            </div>

                                            <div class="text-box">
                                                <p><b>Call Us:</b>
                                                    <br> <a href="tel:{{ config('web_config.tel') }}">{{ config('web_config.tel') }}</a>
                                                    <br> <a href="tel:{{ config('web_config.phone') }}">{{ config('web_config.phone') }}</a>
                                                </p>
                                            </div>

                                        </li>
                                        <li>
                                            <div class="icon_box">
                                                <i class="fa fa-envelope"></i>
                                            </div>

                                            <div class="text-box">
                                                <p><b>Mail Us:</b>
                                                    <br> <a href="mailto:{{ config('web_config.email_1') }}">{{ config('web_config.email_1') }}</a>
                                                    <br> <a href="mailto:{{ config('web_config.email_2') }}">{{ config('web_config.email_2') }}</a>
                                                </p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $('.collapse').collapse()
    </script>
    <script>
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function() {
            'use strict';
            window.addEventListener('load', function() {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');
                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function(form) {
                    form.addEventListener('submit', function(event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                            event.setCustomValidity('错误')
                            console.log(event.preventDefault())
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();
    </script>
@endsection
